<script>
import render from './custom/viewRender'

const layouts = {
  colItem(h, element, value) {
    console.log(value);
    element.disabled = true;
    let labelWidth = element.labelWidth ? `${element.labelWidth}px` : null
    if (element.viewType === 'component') {
      if (element.compType === 'upload') {
        let fileListformitem = [];
        if (value != "" && value != null) {
          console.log(value);
          let files = JSON.parse(value)
          files.forEach((file, index) => {
            // 获取文件的扩展名
            const fileExtension = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase();
            // 支持的图片文件扩展名
            const imageExtensions = ['jpg', 'jpeg', 'png', 'gif'];
            // 判断文件是否为图片
            const isImage = imageExtensions.includes(fileExtension);
            if(isImage){
              fileListformitem.push(
                <el-image style="width: 100px; height: 100px;margin-right:5px" src={file.url} fit="fill" preview-src-list={[file.url]}></el-image>
               )
            }else{
              fileListformitem.push(
              <el-link type="primary" href={file.url} target="_blank">{file.name}</el-link>
               )
            }
     
          });
        }

        //console.log(fileListformitem);
        return (<el-form-item label={element.showLabel ? element.label : ''}
          label-width={labelWidth}
          prop={element.id}
        >
          {fileListformitem}
        </el-form-item>)

      } else {
        return (
          <el-form-item label={element.showLabel ? element.label : ''}
            label-width={labelWidth}
            prop={element.id}
          >
            <render key={element.id} conf={element} value={value} onInput={event => {
              this.$set(element, 'value', event);
            }} />
          </el-form-item>
        )
      }

    } else if (element.viewType === 'html') {
      return (
        <el-form-item label={element.showLabel ? element.label : ''}
          label-width={labelWidth}
          prop={element.id}
        >
          <fancy-html text={value} />
        </el-form-item>
      )
    } else {
      if (typeof value === 'object') {
        value = value[0] + ' ' + element['range-separator'] + ' ' + value[1];
      }
      return (
        <el-form-item label={element.showLabel ? element.label : ''}
          label-width={labelWidth}
          prop={element.id}
        >
          {value}
        </el-form-item>
      )
    }

  }
}

export default {
  name: "formViewItem",
  components: {
    render
  },
  props: ['model', 'value'],
  data() {
    return {
      eleConfig: this.model
    }
  },
  methods: {
    handleClick() {
      console.log('link clicked');
      // 处理点击事件，可以访问到组件内的 data 数据
    },
  },
  render(h) {
    return layouts.colItem.call(this, h, this.eleConfig, this.value)
  }
}
</script>
<style>
/* .el-form-item__label{
  font-weight: 600;
} */
.el-form-item {
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 5px;
}
</style>